<template>
  <div class="social-container">
    <div class="app-container">
      <h2 ref="href">
        {{ num }}
      </h2>
      <button @click="add">add</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Social',
  data() {
    return {
      num: 100
    }
  },
  // created() {
  //   console.log('hello')
  // },
  // updated() {
  //   console.log(this.$refs.href.innerHTML)
  // },
  methods: {
    add() {
      this.num++
      console.log(this.$refs.href.innerHTML) // 直接去h2标签中的内容 是 dom未更新的内容.
      // 想要等dom更新完毕后, 再去取dom中的内容
      // dom更新期间 会有一个新旧虚拟dom对比的过程
      // setTimeout(() => {
      //   console.log(1)
      // }, 0)
      // this.$nextTick(() => {
      //   console.log(3)
      // })
      setTimeout(() => {
        console.log(2)
        console.log(this.$refs.href.innerHTML)
      }, 0)
    }
  }
}
</script>

<style>

</style>
